<template>
  <div>
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in 6" :key="item">
        <h3 class="medium">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

    <!-- <el-row :gutter="20">
      <el-col :span="8">
        <div class="card kjfs">
          <p class="title"><i class="fa fa-th-large fa-lg"></i>快捷方式</p>
          <ul>
            <li><router-link to="/addArticle" class="kjfs kjfs-bluee"><span><i
                    class="el-icon-tickets fa-2x"></i></span><span>发表文章</span></router-link></li>
            <li><router-link to="/dragTabe" class="kjfs kjfs-pinkk"><span><i
                    class="fa fa-hand-stop-o fa-2x"></i></span><span>拖拽排序</span></router-link></li>
            <li><router-link to="/pagePermissions" class="kjfs kjfs-yelloww"><span><i
                    class="fa fa-universal-access fa-2x"></i></span><span>权限测试</span></router-link></li>
          </ul>
          <ul>
            <li><router-link to="/upload" class="kjfs kjfs-grennn"><span><i
                    class="fa fa-cloud-upload fa-2x"></i></span><span>文件上传</span></router-link></li>
            <li><router-link to="/navClassifies" class="kjfs kjfs-purplee"><span><i
                    class="fa el-icon-menu fa-2x"></i></span><span>前台菜单</span></router-link></li>
            <li><router-link to="/markdown" class="kjfs kjfs-lightBluee"><span><i
                    class="fa fa-file-code-o fa-2x"></i></span><span>编辑器</span></router-link></li>
          </ul>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card dbsx">
          <p class="title"><i class="fa fa-file-text-o"></i>待办事项</p>
          <ul>
            <li><router-link to="#"><span>待审评论</span><span class="num">66</span></router-link></li>
            <li><router-link to="#"><span>待审帖子</span><span class="num">66</span></router-link></li>
          </ul>
          <ul>
            <li><router-link to="#"><span>待审商品</span><span class="num">66</span></router-link></li>
            <li><router-link to="#"><span>代发货</span><span class="num">66</span></router-link></li>
          </ul>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card bbxx">
          <p class="title"><i class="fa fa-server"></i>版本信息</p>
          <div class="table">
            <p><span class="tit">当前版本</span>v1.0.0</p>
            <p><span class="tit">基于框架</span>vue2.0全家桶 + element-ui</p>
            <p><span class="tit">主要特色</span>单页面 / 响应式 / 无限级菜单 / 权限管理 / 极简</p>
            <p><span class="tit">获取渠道</span>
              <span class="gitbox">
                <a target="_blank" href="https://github.com/Nirongxu/vue-xuAdmin.git"><el-button type="primary"
                    icon="el-icon-download" size="small">github</el-button></a>
                <a target="_blank" href="https://gitee.com/nirongxu/vue-xuAdmin.git"><el-button type="primary"
                    icon="el-icon-download" size="small">码云</el-button></a>
              </span>
            </p>
          </div>
        </div>
      </el-col>
    </el-row> -->


    <!-- <el-row :gutter="20">
      <el-col :span="6">
        <div>
          <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
            <template slot="prefix">
              <i class="el-icon-s-flag" style="color: red"></i>
            </template>
            <template slot="suffix">
              <i class="el-icon-s-flag" style="color: blue"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row> -->
    <i class="el-icon-document-copy" style="font-size:18px"> 员工信息</i>
    <br><br>

    <el-descriptions v-for="item in shop" :column="2" border>
      <!-- <el-descriptions-item label="类型" label-class-name="my-label" content-class-name="my-content">{{
        item.name }}</el-descriptions-item>
      <el-descriptions-item label="居住地">{{ item.addreess }}</el-descriptions-item> -->
      <el-descriptions-item label="类型" label-class-name="my-label" content-class-name="my-content">
        <el-tag size="large">{{ item.name }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="联系地址">{{ item.addreess
      }}</el-descriptions-item>
    </el-descriptions>


    <!-- <el-row>
      <el-col :span="24">
        <line-echarts id="lineEcharts" height="300px" ref="echarts"></line-echarts>
      </el-col>
    </el-row> -->

    <br>
    <!-- <el-row>
      <el-col :span="24">
        <maintable id="maintable"></maintable>
      </el-col>
    </el-row> -->

    <el-row>
      <el-col :span="8" v-for="item in arr" :key="item.path">
        <el-card :body-style="{ padding: '4px', margin: '2px' }">
          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
            class="image" @click="jumpWash(item.path)">
          <div style="padding: 14px;">
            <span>{{ item.name }}</span>
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
              <el-button type="text" class="button" @click="jumpWash(item.path)">开始{{ item.name }}</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LineEcharts from "../../components/ECharts/lineEcharts"
import Maintable from "../table/maintable"
import * as echarts from 'echarts';
export default {
  name: "mainIndex",
  components: { Maintable, LineEcharts },
  data() {
    return {
      item: ['http://www.chinalaundry.cn//repository/image/17710dca-77be-4ec4-98da-59fc585eb6bc.jpg'],
      currentDate: "Now",
      arr: [
        {
          heade: "店铺信息",
          name: "鞋靴清洗",
          path: "shoe"
        },
        {
          heade: "",
          name: "上衣清洗",
          path: "jacket"
        },
        {
          heade: "",
          name: "裤装清洗",
          path: "trousers"
        },
        {
          heade: "",
          name: "老人护理",
          path: "careold"
        },
        {
          heade: "",
          name: "美食服务",
          path: "foods"
        },
        {
          heade: "",
          name: "面部护理",
          path: "face"
        },
      ],
      like: true,
      value1: 4154.564,
      value2: 2222,
      title: '今年的增长',
      shop: [
        {
          title: "店铺类型",
          name: "洗衣店",
          addreess: "江苏省苏州市吴中区吴中大道 1188 号"
        },
        {
          title: "店铺类型",
          name: "洗鞋店",
          addreess: "江苏省苏州市吴中区吴中大道 1188 号"
        },
        {
          title: "店铺类型",
          name: "美食店",
          addreess: "江苏省苏州市吴中区吴中大道 1188 号"
        },
        {
          title: "店铺类型",
          name: "服装店",
          addreess: "江苏省苏州市吴中区吴中大道 1188 号"
        },
      ]
    }
  },
  mounted() {
    this.selfAdaption()
    this.currentDate = new Date().toLocaleString()
    this.currentDate = new Date().toLocaleString()

  },
  methods: {
    // echart自适应
    selfAdaption() {
      let that = this
      setTimeout(() => {
        window.onresize = function () {
          if (that.$refs.echarts) {
            that.$refs.echarts.chart.resize()
          }
        }
      }, 10)
    },
    jumpWash(data) {
      this.$router.push({ path: data })
    }
  }
}
</script>

<style lang="scss">
$top: top;
$bottom: bottom;
$left: left;
$right: right;
$leftright: (
  $left,
  $right
);
$pinkk: #eec2d3;
$bluee: #409eff;
$yelloww: #f4d884;
$grennn: #89dda0;
$purplee: #78a2ea;
$lightBluee: #b8d6ff;

$list: bluee pinkk yelloww grennn purplee lightBluee;
$list1: $bluee $pinkk $yelloww $grennn $purplee $lightBluee;

.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
  background-color: white;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;

  &:hover {
    cursor: pointer;
  }
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

%shadow {
  background: #fff;
  -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2);
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);

  .title {
    font-size: 14px;
    padding: 10px;

    i {
      margin-#{$right}: 5px;
    }
  }
}

@mixin flex($direction: row, $content: space-between) {
  display: flex;
  flex-direction: $direction;
  justify-content: $content;
}

.card {
  color: #666;
  @extend %shadow;

  ul {
    @include flex;

    li {
      flex: 1;

      a {
        color: #666666;
        align-items: center;
        padding-#{$top}: 20px;
        padding-#{$bottom}: 20px;
        @include flex(column);

        span {
          height: 44px;
        }

        .num {
          line-height: 44px;
          font-size: 42px;
          color: $bluee;
          margin: 0px;
        }
      }

      .kjfs-bluee {
        color: $bluee;
      }

      .kjfs-pinkk {
        color: $pinkk;
      }

      .kjfs-yelloww {
        color: $yelloww;
      }

      .kjfs-grennn {
        color: $grennn;
      }

      .kjfs-purplee {
        color: $purplee;
      }

      .kjfs-lightBluee {
        color: $lightBluee;
      }

      &:hover {
        .kjfs-bluee {
          color: #ffffff;
          background: $bluee;
        }

        .kjfs-pinkk {
          color: #ffffff;
          background: $pinkk;
        }

        .kjfs-yelloww {
          color: #ffffff;
          background: $yelloww;
        }

        .kjfs-grennn {
          color: #ffffff;
          background: $grennn;
        }

        .kjfs-purplee {
          color: #ffffff;
          background: $purplee;
        }

        .kjfs-lightBluee {
          color: #ffffff;
          background: $lightBluee;
        }
      }
    }
  }

  .table {
    padding: 21px;

    p {
      height: 52px;
      line-height: 52px;
      border: 1px solid #cccccc;
      overflow: hidden;
      border-#{$top}: none;
      @include flex(null, start);

      &:first-child {
        border-#{$top}: 1px solid #cccccc;
      }

      span {}

      .tit {
        width: 90px;
        min-width: 90px;
        height: 100%;
        text-align: center;
        border-#{$right}: 1px solid #cccccc;
        margin-#{$right}: 18px;
      }

      span.gitbox {
        flex: 1;
        height: 100%;
        overflow: hidden;
        @include flex(row, start);

        a {
          &:first-child {
            margin-#{$right}: 30px;
          }
        }
      }
    }
  }
}

#lineEcharts {
  margin-#{$top}: 30px;
  padding-#{$top}: 30px;
  @extend %shadow;
}

#maintable {
  margin-#{$top}: 30px;
  padding-#{$top}: 10px;
  @extend %shadow;
}
</style>
